<template>
  <div class="common-layout">
    <el-container>
      <el-header height="60px">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
            @select="handleSelect">
            <el-menu-item index="0" color="#336699">
              <el-image style="width: 100px; height: 50px" :src="logo" :fit="fit" />
            </el-menu-item>
            <div class="flex-grow" />
            <el-menu-item index="1">
              <router-link to="/HostManager"><el-icon>
                  <Monitor />
                </el-icon>主机管理</router-link>
            </el-menu-item>
            <el-menu-item index="2">
              <router-link to="/HostSet"><el-icon>
                  <Operation />
                </el-icon>主机设置</router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <router-link to="/AppInstall"><el-icon>
                  <Setting />
                </el-icon>应用安装</router-link>
            </el-menu-item>
            <el-menu-item index="4">
              <router-link to="/ToolsInstall"><el-icon>
                  <Coin />
                </el-icon>工具安装</router-link>
            </el-menu-item>
            <el-menu-item index="5">
              <router-link to="/AmbariInstall"><el-icon>
                  <MessageBox />
                </el-icon>Ambari安装</router-link>
            </el-menu-item>
          </el-menu>
      </el-header>
      <el-main><router-view /></el-main>
      <el-footer height="120px">Footer</el-footer>
    </el-container>
  </div>
</template>
  
<script>
// App.vue 的名称叫 app
export default {
  data() {
    return {
      logo: require('@/assets/logo.svg')
    }
  }
}
</script>

<style>
a {
  text-decoration: none;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#top_btn_layout {
  text-align: right;
}

#top_menu {
  margin-top: 10px;
}

.flex-grow {
  flex-grow: 1;
}</style>
